<template>
  <card-page style="width: 700px; margin-left: auto; margin-right: auto;">
    <el-form
      ref="form"
      :model="form" 
      label-width="120px"
      style="width: 600px;margin: 0 auto"
    >
      <el-form-item
        prop="name"
        label="姓名"
        :rules="[{required: true, message: ' '}]"
      >
        <el-input v-model.trim="form.name"></el-input>
      </el-form-item>
      <el-form-item
        prop="gender"
        label="性别"
        :rules="[{required: true, message: ' '}]">
        <el-radio-group v-model="form.gender">
          <el-radio :label="0">男</el-radio>
          <el-radio :label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        prop="idcard"
        label="身份证"
        :rules="[{required: true, message: ' '}]"
      >
        <el-input v-model.trim="form.idcard"></el-input>
      </el-form-item>
      <el-form-item
        prop="phone"
        label="手机号"
        :rules="[{required: true, message: ' '}]">
        <el-input v-model.trim="form.phone"></el-input>
      </el-form-item>
      <el-form-item
        prop="serviceOrgId"
        label="服务社区"
        :rules="[{required: true, message: ' '}]">
        <org-select v-model="form.serviceOrgId" />
      </el-form-item>
      <el-form-item
        prop="area"
        label="服务地址-地区"
      >
        <area-select v-model="area" style="width: 100%;"></area-select>
      </el-form-item>
      <el-form-item
        prop="address"
        :label="mode == 'add' ? '服务地址-详细' : '服务地址-完整'"
      >
        <el-input type="textarea" :rows="1" v-model.trim="form.serviceAddress"></el-input>
      </el-form-item>
      <el-form-item prop="profession" label="服务领域">
        <type-select
          v-model="form.profession"
          :items="professions"
          multiple
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item
        prop="volunteerDesc"
        label="简介"
      >
        <el-input type="textarea" :rows="4" v-model="form.volunteerDesc"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
      </el-form-item>
    </el-form>
  </card-page>
</template>

<script>
import { Select } from 'element-ui';

export default {
  pageProps: {
    title: ({params}) => `${params.mode == 'add' ? '增加' : '修改'}志愿者`
  },
  components: {
    OrgSelect: () => import('@/pages/org/OrgSelect'),
    AreaSelect: () => import('@/components/area-select/AreaSelect')
  },
  data() {
    return {
      mode: this.$params.mode,
      form: {
        userId: null,
        name: '',
        gender: null,
        idcard: '',
        phone: '',
        serviceOrgId: null,
        serviceAddress: '',
        profession: [],
        volunteerDesc: ''
      },
      professions: [],
      area: {prov: '湖北省', city: '武汉市'},
      submitting: false
    }
  },
  async mounted() {
    this.professions = (await this.$http.get('/api/volunteer/profession'))
      .map(item => ({value: item.key, text: item.value}));
    if (this.mode == 'update') {
      let volunteer = await this.$http.get('/api/volunteer/volunteer', {params: {userId: this.$params.userId}});
      volunteer.profession = volunteer.profession.split(',');
      volunteer.gender = volunteer.gender == '男' ? 0 : 1;
      this.form = volunteer;
      this.area = {prov: volunteer.province, city: volunteer.city, dist: volunteer.district};
    }
  },
  methods: {
    onSubmit() {
      if (this.mode == 'add') {
        this.onAddSubmit();
      } else {
        this.onUpdateSubmit();
      }
    },
    onAddSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        this.submitting = true;
        let volunteerData = {...this.form};
        volunteerData.province = this.area.prov;
        volunteerData.city = this.area.city;
        volunteerData.district = this.area.dist;
        volunteerData.profession = volunteerData.profession.join(',');
        const ret = await this.$http.post('/api/volunteer/volunteer', volunteerData);
        this.submitting = false;
        if (ret.success) {
          this.$message.success('增加志愿者成功');
          this.$refs.form.resetFields();
          this.$params.onSuccess();
        } else {
          this.$message.error(ret.message);
        }
      });
    },
    onUpdateSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return;
        this.submitting = true;
        let volunteerData = {...this.form};
        volunteerData.province = this.area.prov;
        volunteerData.city = this.area.city;
        volunteerData.district = this.area.dist;
        volunteerData.profession = volunteerData.profession.join(',');
        const ret = await this.$http.put('/api/volunteer/volunteer', volunteerData);
        this.submitting = false;
        if (ret.success) {
          this.$message.success('修改志愿者成功');
          this.$params.onSuccess();
        } else {
          this.$message.error(ret.message);
        }
      });
    },
  }
}
</script>